const btn = document.querySelector(".btn");
btn.onclick = () => {
  // 设置元素出现的x y位置
  const { x, y, top, height } = btn.getBoundingClientRect();
  const add = document.createElement("div");
  add.style.right = y + "px";
  add.style.top = top + "px";
  //   动态设置目标值x y 动态算出距离购物车的位置 动画执行到这个位置 设置贝塞尔曲线实现抛物线效果
  const yy = document.body.clientHeight - height - top;
  add.style.setProperty("--y", yy + "px");
  add.style.setProperty("--x", -x + "px");
  add.className = "plus";
  add.innerHTML = ` <div class="icon">
          <?xml version="1.0" encoding="UTF-8"?><svg
            width="24"
            height="24"
            viewBox="0 0 48 48"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44Z"
              fill="none"
              stroke="#333"
              stroke-width="4"
              stroke-linejoin="round"
            />
            <path
              d="M24 16V32"
              stroke="#333"
              stroke-width="4"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
            <path
              d="M16 24L32 24"
              stroke="#333"
              stroke-width="4"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
          </svg>
        </div>`;
  document.querySelector(".box").append(add);
  //   动画完成删除dom
  add.addEventListener("animationend", () => {
    add.remove();
  });
};
